<template>
  <div>
    <Header :loginState="'toLogin'" :headerStyle="'light'"></Header>
    <Reload :key="isReload"></Reload>

    <!-- HERO
            ============================================= -->
    <section id="out">
      <section id="porAvoidHeader" class="mt-5 pb-2">
        <div class="row align-items-center pl-4">
          <div class="col-12 mb-4 mb-lg-0 mt-5">
            <!-- Title -->
            <div class="row line">
              <div class="col-2">
                <div id="porAvoidTiTle" class="section-title">
                  <h3 class="sub-title base-color mb-2">食 物 禁 忌</h3>
                  <h2 class="title">{{ search }}</h2>
                </div>
              </div>
              <div class="col-4 ml-auto py-2">
                <SearchInput @toSearch="getSearchInfo"></SearchInput>
              </div>
            </div>
            <section class="comtinue foodDetail" v-if="dataList[1]">
              <div class="row">
                <aside class="continue col-lg-8">
                  <div class="section-title row">
                    <h2 class="title text-dark col-3">禁忌人群:</h2>
                    <p class="text-muted col-9">
                      {{ dataList[3].content }}
                    </p>
                  </div>
                  <div class="section-title row">
                    <h2 class="title text-dark col-3">适宜人群:</h2>
                    <p class="text-muted col-9">{{ dataList[5].content }}</p>
                  </div>
                  <div class="section-title row">
                    <h2 class="title text-dark col-3" style="text-indent: 2em">
                      功效:
                    </h2>
                    <p class="text-muted col-9">
                      {{ dataList[1].content }}
                    </p>
                  </div>
                </aside>
                <aside class="col-lg-4"></aside>
              </div>
            </section>
          </div>

          <div class="col-lg-6">
            <div class="position-relative"></div>
          </div>
        </div>

        <section id="about" class="about video py-3">
          <div class="container">
            <div class="about-bg-graphics">
              <img src="../assets/img/about-bg.png" alt="/" />
            </div>

            <div class="row align-items-center">
              <div class="col-lg-12 px-2" v-if="dataList[6]">
                <Folding :title="'FoodInfo'" :isSelect="true">
                  <span slot="title">查看详细</span>
                  <div slot="content">
                    <Folding
                      v-for="(p, index) in dataList.slice(6)"
                      :key="index + 'detail'"
                      :title="p[0].content"
                      :isSelect="false"
                      :openDot="true"
                    >
                      <span slot="title">{{ p[0].content }}</span>
                      <div slot="content">
                        <span
                          v-for="(j, index) in p.slice(1)"
                          :key="index + 'detailInfo'"
                          :class="{ p: j.lable === 'smalltitle' }"
                          >{{ j.content }}</span
                        >
                      </div>
                    </Folding>
                  </div>
                </Folding>
              </div>
            </div>
            <!-- End row -->
          </div>
          <!-- End container -->
        </section>
        <!-- END ABOUT -->
      </section>
      <!-- END HERO -->

      <section id="porAvoidBody" class="mt-4 pt-2 pb-5">
        <section id="services" class="services">
          <div class="services-bg-graphics">
            <img src="../assets/img/services-bg.png" alt="/" />
          </div>

          <div class="container">
            <!-- Title -->
            <div class="section-title text-center">
              <h2 class="title text-dark">食 物 相 克 表</h2>
            </div>

            <div class="row mt-2" v-if="avoidList.length !== 0">
              <AvoidItem
                v-for="(item, index) in avoidList"
                :key="'禁忌' + index"
                :itemA="item.selectA"
                :itemB="item.selectB"
                :isFit="item.lable === '相克' ? false : true"
              >
                {{ item.reason }}
              </AvoidItem>
            </div>
          </div>
          <!-- End container -->
        </section>
        <!-- END SERVICES -->
      </section>
    </section>
    <!-- FOOTER
            ============================================= -->
    <footer id="footer" class="container-fluid pt-6 bg-light">
      
      <!-- <div class="row">
        <div class="footer-section-bg-graphics">
          <img src="../assets/img/footer-section-bg.png" alt="/" />
        </div>

        <div class="container">
          <div class="row footer-section">
            
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-logo">
                
                <a href="index.html">
                  <h3 class="base-color">Roiton</h3>
                </a>

                
                <p>
                  sed diam nonummy nibh euismod tincidunt aliquam erat volutpat.
                </p>
                <p>
                  Lorem ipsum dolor nibh euismod tincidunt sit amet adipiscing
                  elit, ut laoreet dolore magna aliquam erat volutpat.
                </p>
              </div>
            </div>
            

            
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                
                <h4>Contact Us</h4>
                
                <p>Lorem ipsum dolor sit amet, consectetuer sed volutpat.</p>

                <ul>
                  <li>
                    <span class="base-color lni-map-marker"></span>NewYork,
                    United State
                  </li>
                  <li>
                    <span class="base-color lni-phone"></span>+123-4567-890
                  </li>
                  <li>
                    <span class="base-color lni-envelope"></span
                    ><a href="mailto:" class="text-dark"
                      ><span
                        class="__cf_email__"
                        data-cfemail="e390828e938f86a390828e938f86cd808c8e"
                        >[email&#160;protected]</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
            </div>
            

            
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-newsletter">
                
                <h4>Subscribe Us</h4>

                
                <p>
                  Stay up to date with our latest news, updates and our new
                  products!
                </p>

                <form action="#" method="get">
                  <button class="newsletter-btn" type="submit">
                    <i class="lni-envelope text-white"></i>
                  </button>
                  <input
                    class="newsletter"
                    type="text"
                    placeholder="mail@example.com"
                  />
                </form>
              </div>
            </div>
            

            
            <div class="col-lg-3 col-md-6">
              <div class="footer-section-information">
                
                <h4>Social Links</h4>

               
                <p>
                  Join our mailing list to stay up to date and get notices about
                  our new releases!
                </p>

                <ul class="social-link list-inline">
                  <li>
                    <a href="#"><i class="lni-facebook-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-twitter-filled"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-google-plus"></i></a>
                  </li>
                  <li>
                    <a href="#"><i class="lni-instagram-filled"></i></a>
                  </li>
                </ul>
              </div>
            </div>
            
          </div>
        </div>
        
      </div> -->
      <!-- END FOOTER CONTENT -->

      <!-- FOOTER COPYRIGHT -->
      <div class="row footer-copy-right">
        <div class="container">
          <div class="row border-top">
            <div class="col-sm-8 footer-copy-right-text">
              版权所有 &copy; 2021.湖南农业大学 保佑所有版权
            </div>
          </div>
        </div>
      </div>
      <!-- END FOOTER COPYRIGHT -->
    </footer>
    <!-- END FOOTER -->
    <ReturnTop></ReturnTop>
  </div>
</template>

<script>
import $ from "jquery";
import axios from "axios";

// 组件
import Header from "../components/Header.vue";
import ReturnTop from "../components/ReturnTop.vue";
import Reload from "../components/Reload.vue";
import Folding from "../components/Folding.vue";
import AvoidItem from "../components/AvoidItem.vue";
import SearchInput from "../components/SearchInput.vue";

export default {
  data() {
    return {
      search: "初始化",
      dataList: [],
      avoidList: [],
      isReload: 0,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.search = this.$route.query.search;

    //获取食物百科数据
    axios
      .get(
        `http://81.68.255.101:8097/api/Askanswer/getfoodmess/type=foodmes&foodname=${this.$route.query.search}`
      )
      .then((respons) => {
        this.dataList = this.DateListProcess(respons.data.value);
      });

    //获取食物禁忌数据
    axios
      .get(
        `http://81.68.255.101:8097/api/Taboo/getfoodtaboo/ask=${this.$route.query.search}/`
      )
      .then((respons) => {
        // console.log(respons.data);
        this.avoidList = respons.data;
      });
  },
  methods: {
    getDate(val) {
      //获取食物百科数据
      axios
        .get(
          `http://81.68.255.101:8097/api/Askanswer/getfoodmess/type=foodmes&foodname=${val}`
        )
        .then((respons) => {
          this.dataList = this.DateListProcess(respons.data.value);
        });

      //获取食物禁忌数据
      axios
        .get(`http://81.68.255.101:8097/api/Taboo/getfoodtaboo/ask=${val}/`)
        .then((respons) => {
          // console.log(respons.data);
          this.avoidList = respons.data;
        });
    },
    DateListProcess(data) {
      // console.log(data);
      let newDate = [];
      let newDateItem = [];
      for (let i = 0; i <= 5; i++) {
        newDate.push(data[i]);
      }
      for (let i = 6; i < data.length; i++) {
        if (data[i].lable === "title") {
          newDateItem = [];
          newDateItem.push(data[i]);
          i++;
          for (; i < data.length; i++) {
            if (data[i].lable !== "title" && data[i].content !== "") {
              newDateItem.push(data[i]);
            } else if (data[i].lable === "title") {
              i--;
              break;
            }
          }
          newDate.push(newDateItem);
        }
      }
      return newDate;
    },
    getSearchInfo(val) {
      this.getDate(val);
      this.$router.push({ path: "/portfolio-avoid", query: { search: val } });
      this.search = val;
      setTimeout(this.isReload++, 1000);
    },
  },
  components: {
    Header,
    ReturnTop,
    Reload,
    Folding,
    AvoidItem,
    SearchInput,
  },
};
</script>

<style scoped>
#out {
  padding: 0 8%;
  background-color: #fff;
}
#search {
  text-align: center;
}
#search > div {
  width: auto;
}
#searchInput {
  margin: 0 auto;
  /* width: 80%; */
}
#porAvoidHeader .line {
  border-bottom: 2px solid #6159e699;
}

#porAvoidHeader #porAvoidTiTle .title,
#porAvoidHeader #porAvoidTiTle .sub-title {
  text-align: center;
}
#porAvoidHeader #porAvoidTiTle .title {
  margin-left: 25px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0;
}
#porAvoidHeader .foodDetail .section-title {
  margin-left: 10px;
  margin-top: 10px;
  border-bottom: 2px dotted #6159e699;
}
#porAvoidHeader {
  border-bottom: 2px solid #6159e699;
}
#porAvoidHeader .foodDetail .section-title .title {
  text-align: center;
  font-size: 25px;
  line-height: 1.2;
}
</style>
